<template>
	<view class="y">
		<view class="y" v-for="(item,index) in list">
			<!-- 我发 -->
			<view class="x touxiang" v-if="item.type==2">
				<view class="xiaoxi">{{item.content}}</view>
				<image src="../../static/头像.jpg" class="tou"></image>
			</view>
			<!-- ai回复 -->
			<view class="x touxiang2" v-if="item.type==1">
				<image src="../../static/客服.jpeg" class="tou2"></image>
				<view class="xiaoxi2">{{item.content}}</view>
			</view>

		</view>

		<!-- 输入框 -->
		<view class="x" style="position: fixed;bottom:20rpx;">
			<input type="text" placeholder="请输入内容" class="shuru" v-model="msg" />
			<view class="fasong">
				<p style="display: flex;justify-content:center;margin-top: 5rpx;" @click="fasong">发送</p>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				msg: '', //接收输入框的内容
				list: [
					// {
					// 		type:1,//表示这是别人发给我的
					// 		content:'这是别人发我的'
					// 	},
					// 	{
					// 		type:2,//表示这是我发给别人的
					// 		content:'这是我发给别人的'
					// 	}//存消息的一个数据
				]
			}
		},
		methods: {
			fasong() {
				this.list.push({
					type: 2, //表示这是我发给别人的
					content: this.msg
				}) //往数组里面添加数据
				uni.showLoading({
					title: "发送中"
				})
				uni.request({
					url: "https://apis.tianapi.com/robot/index?key=3ea9ff76314992e38e67287a7ab5bb27&uniqueid=landingsheng1234&question=" +
						this.msg,
					success: (res) => { //接收到回复
						console.log(res)
						uni.hideLoading()
						this.msg = ''
						this.list.push({
							type: 1, //表示这是别人发给我的
							content: res.data.result.reply
						}) //往数组里面添加数据
					}
				})
			}
		}
	}
</script>

<style>
	.x {
		display: flex;
		/* 打开弹性布局 */
		flex-direction: row;
		/* 横 */

	}

	.y {
		display: flex;
		/* 打开弹性布局 */
		flex-direction: column;
		/* 竖 */
	}

	.touxiang {
		display: flex;
		justify-content: flex-end;
		margin-top: 15rpx;
		align-items: center;
		/* margin: 0 auto; */
		margin-right: 15rpx;
		
		/* 气泡 */
		border-radius: 50%;
	}

	.touxiang2 {
		display: flex;
		justify-content: flex-start;
		margin-top: 35rpx;
		align-items: center;
		/* margin: 0 auto; */
		margin-left: 15rpx;
	}

	.xiaoxi {
		/* width: 500rpx; */
		/* height: 55rpx; */
		background-color: #ffaaff;
		align-items: center;
		font-size: 35rpx;
		color: black;
		
		/* 气泡 */
		border-radius: 50rpx;
	}

	.xiaoxi2 {
		/* width: 500rpx; */
		/* height: 55rpx; */
		background-color: #ffaa7f;
		align-items: center;
		margin-left: 15rpx;
		font-size: 35rpx;
		color: black;
		border-radius:50rpx;
	}

	.tou {
		margin-left: 15rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		/* 圆角 */
		/* background-color: #17b845; */
	}

	.tou2 {
		/* position: fixed;
		left: 20rpx;
		top: 20rpx; */
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		/* 圆角 */
		/* background-color: #17b845; */
	}

	.shuru {
		margin-left: 20rpx;
		padding-left: 15rpx;
		width: 580rpx;
		height: 50rpx;
		border: solid;
		border-color: #e6e6e6;
	}

	.fasong {
		margin: auto;
		width: 90rpx;
		height: 55rpx;
		background-color: #17b845;
		margin-left: 15rpx;
	}
</style>
